<template>
  <view>
    <u-navbar title="图集抖音发布" :autoBack="true" bgColor="rgb(248,248,248)" :rightText="rightText"
              @rightClick="rightClick">
    </u-navbar>
    <view>
      <u-sticky bgColor="">
        <view class="fixed-bottom" v-if="isEdit" style="padding: 10px">
          <u-button size="small"  type="primary" :text="selectTxt"  :custom-style="customStyle1"
                    @click="checkAll">{{ selectTxt }}
          </u-button>
          <u-button size="small"  type="error" text="删除" :custom-style="customStyle2"
                    @click="publish">发布
          </u-button>
        </view>
      </u-sticky>
      <u-alert-tips type="primary" description="点击商品名称或文案可查看完整信息，点击图片可放大查看"
                    :desc-style="descStyle" style="margin-top: 10px"></u-alert-tips>

      <view v-for="(item,index) in list" :key="index">
        <view class="box">
          <view @click="checkItem(item)" style="width: 54px">
            <aip-checkbox :key="keys" :check="item.checked" v-if="isEdit"></aip-checkbox>
          </view>
          <view>
            <view class="content">
              <span @click="showMore(item.content,'文案')">文案：{{ item.content }} </span>
              <span style="color: green;margin-left: 10px" @click="copyContent(item.content)">复制文案</span>
            </view>
            <view style="margin-top: 10px">
              创建时间：{{ item.addTime|time() }}
            </view>
            <view @click="showMore(item.publishGoodsName,'商品名称')" class="content">
              商品名称：{{ item.publishGoodsName }}
            </view>
          </view>


          <u-image mode="aspectFit" width="70%" height="106px" :src="item.imgUrl+'?'+globalImageProcessingSuffix"
                   style="margin-left: 10px" @click="preImg(item.imgUrl)" class="flex  f-s-0 w-100 h-100 bg-img b-radius-5">
            <view slot="error" style="font-size: 24rpx;">
              <img class="flex  f-s-0 w-100 h-120 bg-img b-radius-5"
                   :src="'https://img.fscmkjznb.com/static/noImg.jpeg'+'?'+globalImageProcessingSuffix" alt=""/>
            </view>

          </u-image>
        </view>
      </view>

      <u-modal title="素材发布" :show-cancel-button="false" :showConfirmButton="false" v-model="showPublishDyModal"
               @confirm="toPublishDy()" :asyncClose="true">
        <view style="margin-left: 17px">
          <u-form ref="uForm">
            <u-form-item label="文案">
              <u-input v-model="publishContent"/>
            </u-form-item>
            <u-form-item label="直接发布">
              <u-switch slot="right" v-model="shareToPublish"></u-switch>
            </u-form-item>
            <u-form-item v-if="showLink" label="发布链接">
              <u-button size="mini" type="primary" @click="copyLink">复制链接</u-button>
            </u-form-item>
          </u-form>
          <u-alert-tips v-if="showLink" type="primary"
                        description="请复制发布链接，然后打开手机浏览器粘贴到地址栏进行发布"
                        :desc-style="descStyle" style="margin-top: 10px"></u-alert-tips>

          <view style="display: flex;margin-bottom: 5px;margin-top: 5px">
            <u-button size="mini" type="primary" @click="showPublishDyModal=false">取消</u-button>
            <u-button style="margin-left: 10px" size="mini" type="primary" @click="toPublishDy()">发布</u-button>
          </view>
        </view>
      </u-modal>


      <u-modal v-model="showTips" ref="uModal" show-cancel-button :show-confirm-button="false" @cancel="showTips=false"
               :title="title">
        <span style="margin: 10px;">{{ currentContent }}</span>
      </u-modal>
    </view>
  </view>
</template>

<script>
import checkbox from '@/pages/user/components/aip-checkbox.vue'
import $ from "../../utils/api";
const APIDy = require('../../utils/api/douyin.js').default;
const API = require('../../utils/api/find.js').default;

export default {
  components: {
    'aip-checkbox': checkbox
  },
  data() {
    return {
      customStyle1:{
        "margin-left":"42px",
        "width": "100px",
        "height": "50px"
      },
      customStyle2:{
        "margin-right":"37px",
        "width": "100px",
        "height": "50px"
      },
      imgUrls:'',
      publishContent: '',
      shareToPublish: false,
      showPublishDyModal: false,
      showLink: false,
      globalImageProcessingSuffix: "",
      descStyle: {
        color: "blue",
      },
      currentContent: "",
      showTips: false,
      title: "",
      keys: 0,
      checkBtnHeight: 0,
      deleteConfirmShow: false,
      selectTxt: '全选',
      rightText: '选择',
      isEdit: true,
      list: [],
      page: 1,
      total: 0,
      pageSize: 6,
      totalPage: 1,
    }
  },
  onLoad() {
    this.globalImageProcessingSuffix = getApp().globalData.globalImageProcessingSuffix;
    this.getList()
  },
  methods: {
    copyLink() {
      this.copy(this.publishUrl)
    },
    toPublishDy() {
      let self = this
      let postData = {
        type: 3,
        imgUrlList: self.imgUrls,
        title: self.publishContent,
        shareToPublish: self.shareToPublish
      }
      //授权成功后拿openid和电话去登录
      $.ajax({
        url: APIDy.publishTrends,
        data: postData,
        method: 'GET',
        complete(res) {
          if (res.code === 200) {
            self.publishUrl = res.data
            self.showLink = true
          } else {
            uni.showToast({
              title: res.message,
              icon: 'none'
            });
          }
        }
      });
    },
    publish() {
      const idx = this.list.findIndex(item => item.checked == true);
      if (idx == -1) {
        uni.showToast({
          title: "请先选中发布的数据",
          icon: "none"
        });
        return
      }

      this.list.forEach(item=>{
        if (item.checked){
          this.imgUrls = this.imgUrls+","+item.imgUrl
        }
      })

      this.imgUrls = this.imgUrls.substring(1)
      this.showLink = false
      this.shareToPublish = false
      this.showPublishDyModal = true
    },
    preImg(item) {
      uni.previewImage({
        urls: [item], // 需要预览的图片链接列表
      });
    },
    showMore(data, title) {
      this.currentContent = data
      this.title = title
      this.showTips = true
    },
    copyContent(item) {
      this.copy(item)
    },
    getList() {
      const self = this;
      $.ajax({
        url: API.listTrendsDownloadLog,
        data: {
          page: self.page,
          pageSize: self.pageSize,
          type: 3
        },
        method: 'GET',
        success(res) {
          let list = [];
          if (self.page != 1) {
            list = self.list.concat(res.data.list);
          } else {
            list = res.data.list ? res.data.list : [];
          }
          self.totalPage = res.data.totalPage;
          self.list = list;
        }
      })
    },
    checkItem(item) {
      console.log("item",item)
      item.checked = !item.checked;
      this.keys = this.keys == 1 ? 0 : 1;
    },
    rightClick() {
      if (this.rightText == '选择') {
        this.isEdit = true
        this.rightText = "取消"
      } else {
        this.isEdit = false
        this.rightText = "选择"
      }
    },
    checkAll() {
      if (this.selectTxt == '全选') {
        this.list.forEach((item) => {
          item.checked = true
        })
        this.selectTxt = '取消全选'
      } else {
        this.list.forEach((item) => {
          item.checked = false
        })
        this.selectTxt = '全选'
      }
    },

  }
}
</script>

<style lang="scss" scoped>
.btn {
  margin-top: 10px;
  width: 50px;
  position: absolute;
  left: 125px;
}

.fixed-bottom {
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  margin-bottom: 6;
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  margin: 10px;
  background-color: #afcbd7;
}

.item {
  width: 600rpx;
  height: 140rpx;
  border-radius: 10px;
  background: #cfcfcf;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {

  margin-top: 10px;
  display: flex;
  align-items: center;

}

.content {
  margin-top: 10px;
  width: 150px;
  white-space: nowrap; /* 确保文本在一行内显示 */
  overflow: hidden; /* 隐藏超出容器的内容 */
  text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
}
</style>
